<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Sprite Cow - Generate CSS for sprite sheets</title>
	<link rel="stylesheet" href="assets/8/style/all.css">
	<link rel="shortcut icon" href="assets/8/favicon.ico">
	<script>var _gaq=[['_setAccount','UA-24099758-1'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'))</script>
</head>
<body>
	<div class="container intro">
		<header class="main-header">
			<h1 class="cow-logo">Sprite Cow</h1>
		</header>
		<div class="toolbar-container">
		</div>
		<div class="canvas-view">
			<div class="canvas-cell">
				<div class="canvas-inner"></div>
			</div>
		</div>
		<div class="toolbar-bottom-container">
		</div>
		<div class="further-detail">
			<div class="code-container"></div>
			<div class="intro-copy">
				<section>
					<h1>What?</h1>
					<p>
						Sprite Cow helps you get the background-position, width
						and height of sprites within a spritesheet as a nice
						bit of copyable css.
					</p>
					<p>
						<a href="assets/8/tutorial-sprite.png" class="tutorial">Load the example image</a>, and have a click
						around. It becomes pretty obvious.
					</p>
				</section>
				<section>
					<h1>Why?</h1>
					<p>
						Automated spritesheet generators are pretty cool, but I
						prefer the control over optimisation and compression you
						get by making them manually.
					</p>
					<p>
						However, copying all the positions &amp; sizes from
						graphics apps wasted a ton of my time, so I made this!	
					</p>
				</section>
			</div>
		</div>
		<footer class="main-footer">
			<ul>
				<li><a href="https://github.com/jakearchibald/sprite-cow">Github</a></li>
				<li><a href="https://github.com/jakearchibald/sprite-cow/issues">Bug/feature tracker</a></li>
				<li><a href="http://twitter.com/SpriteCow">Twitter updates</a></li>
			</ul>
			<p>Thrown together by <a class="the-team-logo" href="http://theteam.co.uk">theTeam</a></p>
		</footer>
	</div>
	<div class="feature-test">
		<h1>Sorry, it isn't working out between us</h1>
		<p>
			It's not you, I just can't get along with your browser.
			Maybe if things change in the future... maybe if you bring
			<a href="http://www.google.com/chrome/">Chrome</a>,
			<a href="http://www.mozilla.com/en-US/firefox/new/">Firefox</a>,
			<a href="http://www.opera.com/">Opera</a> or even
			<a href="http://ie.microsoft.com/testdrive/Info/Downloads/Default.html">IE10</a>
			to the party... not promising anything, but give me a call.
		</p>
	</div>
	<script src="assets/8/script/jquery-1.7.1.js"></script>
	<script src="assets/8/script/jquery.easing.js"></script>
	<script src="assets/8/script/jquery.transition.js"></script>
	<script src="assets/8/script/jquery.fileClickjack.js"></script>
	<script src="assets/8/script/intro.js"></script>
	<script src="assets/8/script/MicroEvent.js"></script>
	<script src="assets/8/script/Rect.js"></script>
	<script src="assets/8/script/ImgInput.js"></script>
	<script src="assets/8/script/SpriteCanvas.js"></script>
	<script src="assets/8/script/SpriteCanvasView.js"></script>
	<script src="assets/8/script/InlineEdit.js"></script>
	<script src="assets/8/script/CssOutput.js"></script>
	<script src="assets/8/script/Toolbar.js"></script>
	<script src="assets/8/script/pageLayout.js"></script>
	<script src="assets/8/script/FeatureTest.js"></script>
	<script src="assets/8/script/featureTests.js"></script>
	<script src="assets/8/script/base.js"></script>
</body>
</html>